<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="org.slf4j.*" %>
<%@ page import="cn.fnst.facecomp.*" %>
<%@ page import="java.util.*" %>
<%@ page import="cn.fnst.facecomp.utils.*" %>
<%@ page import="cn.fnst.facecomp.dao.CommonDao" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
<title>人脸识别结果</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.body {font-family: "Source Han Sans CN Light";}
	.upload_photo{text-align: center;font-size: 1rem;}
	.first{height:70%;}
	.photo{width: 8rem;margin: 4rem auto 1.5rem auto;border-radius: .4rem;border: 1px solid #E8E8E8;overflow: hidden;}
	.upload_action_btn{padding: .4rem 1rem;background: #418BC3;font-size: 1rem;color: #FFF;border: none;border-radius: .3rem}
	.upload_action_btn:hover{background: #118de4}
	.input_id p{margin: 4rem 0 .5rem 0;}
	.input_id input,.btn{-webkit-box-sizing:border-box;width: 90%;padding:.7rem;border:1px solid #E8E8E8;}
	.verification{width: 100%; height:30%;padding: 0.8rem 0; margin-top: 1rem; background-color:#F0F0F0;}
	.btn{display:block; width: 45%; float:left; border-radius: .3rem;border: none;color: #FFF;font-size: 1rem;padding: .5em;margin: 2.5%}
	.c1{background: #FF8D21;}
	.c2{background: #D2D2D2;}
	.andorid_share{display:block; width: 45%; float:right; background: #02BA00;border-radius: .3rem;border: none;color: #FFF;font-size: 1rem;padding: .5em;margin: 2.5%}	
	.iphone_share {display:block; width: 45%; float:right; background: #02BA00;border-radius: .3rem;border: none;color: #FFF;font-size: 1rem;padding: .5em;margin: 2.5%}	
	.verification_result1{margin: 1.5rem 0 2rem 0}
	.verification_result2{margin: 1.7rem 0 0.3rem 0}
	.verification_result1 .percent{font-size: 1.9rem;color: #087D06;}
	.mt0{margin-top: 0}
	.c77BF60{color:  #77BF60;font-size: 1.2rem}
	.comment {font-size: 1rem;color: #045302 ;}
	.ping_fen_ul {margin: 0 auto; height:25px; width:150px}
	.ping_fen {float:left; margin-left: 5px}
	.ping_fen img {width: 25px;}
	.ping_fen_wrapper {margin: 0 auto;}
	.foot{padding-top: 1.3rem; width: 95%; margin: 0 auto;}
</style>
</head>
<body>
<%
	Logger log = LoggerFactory.getLogger(getClass());
	
	String result = (String) request.getAttribute("result");
	String idCard = (String) request.getAttribute("idCard");
	String description = "颜值太高！一点都不像呢！";
	String photoUrl = "/face/upload/" + (String) request.getAttribute("photoUrl");	
	String id = (String) request.getAttribute("id");
	String iphoneShareInfo = (String) request.getAttribute("iphoneShareInfo");
	log.info("iphoneShareInfo: " + iphoneShareInfo);

	//分享字段
	String shareImg = (String) request.getAttribute("shareImg");
	String shareNullImg = (String) request.getAttribute("shareNullImg");
	String shareTitle = (String) request.getAttribute("shareTitle");
	String shareDesc = (String) request.getAttribute("shareDesc");
	String shareUrl = (String) request.getAttribute("shareUrl");
	
	log.info("shareImg: " + shareImg);
	log.info("shareNullImg: " + shareNullImg);
	log.info("shareTitle: " + shareTitle);
	log.info("shareDesc: " + shareDesc);
	log.info("shareUrl: " + shareUrl);
	
	int rate = 0;
	try{
		rate = Integer.valueOf(result);
	}catch(Exception e){
		e.printStackTrace();
	}

	if ((rate - 80) >= 0){
		description = "照片的相似度很高！";
	}
	
	long usedTimes = 0;
	try{
		usedTimes = CommonDao.getInstance().getUsedTimes(idCard, Utils.getDateString(new Date()));
	}catch(Exception e){
		log.error(e.getMessage());
	}
	
	//result = "99";
%>
<div class="upload_photo">
	<div class="first">
		<div class="verification_result1">
			<p style="color: #FE8E20; font-size: 1.2rem; margin: 0 0 0.3rem 0">相似度</p>
			<p class="percent" style="font-weight:200;"><strong><%=result %>%</strong></p>
		</div>
		<div class="photo mt0"><img width="100%" src="<%= photoUrl %>"/></div>
		<div class="verification_result2">
			<div class="comment">你觉得识别的准么?</div>	
		</div>	

		<ul class="ping_fen_ul">
			<li class="ping_fen"><img src="theme/images/xing2.png" /></li>
			<li class="ping_fen"><img src="theme/images/xing2.png" /></li>
			<li class="ping_fen"><img src="theme/images/xing2.png" /></li>
			<li class="ping_fen"><img src="theme/images/xing2.png" /></li>
			<li class="ping_fen"><img src="theme/images/xing2.png" /></li>
		</ul>
	</div>
	<div class="verification">
		<div class="foot">
			<a id="btn_again" class="btn c1" href="znmh://module/cs_rlsb">再次识别(<%= usedTimes %>/<%= Constant.MAX_TIMES%>)</a>
			<a class="andorid_share" href="javascript:share1(<%= rate%>)"><img width="18" src="theme/images/share1.png" />分享到微信</a>
			<a class="iphone_share" href="javascript:void(0);" onclick="javascript:share2('<%= iphoneShareInfo%>');return false;"><img width="18" src="theme/images/share1.png" />分享到微信</a>
		</div>
	</div>
</div>

<script type="text/javascript">
	function comment(value, id){		
		$.ajax({
			url: "AddComment",
			type: "GET",
			data: "comment="+value+"&id="+id,
			cache: false,
			success: function(html){
				afterPingfen(value);
			},
			error: function(obj){
				//alert(obj);
			}
		});
	}

	function share1(rate){
		recordShare();
		var dev = window.navigator.userAgent.toLowerCase();
		//alert(dev);
	    if(dev.match(/Android/i)=='android'){
             var shareimg="<%= shareImg%>";
             var nullimg="<%= shareNullImg%>";
             var sharetitle="<%= shareTitle%>";
             var sharedesc="<%= shareDesc%>";
             var shareurl="<%= shareUrl%>";
             znmh.share(shareimg,nullimg,sharetitle,sharedesc,shareurl);
		}else if(dev.match(/Android/i)=='iphone'){
	         //document.shareForm.submit();
		}
	}
	
	function share2(x){
		recordShare();
		location.href=x;   
	}
	
	function recordShare(){
		var id = '<%= id %>';
		$.ajax({
			url: "RecordShare",
			type: "POST",
			data: "id="+id,
			cache: false,
			success: function(conf){
				//alert(conf);
			},
			error: function(obj){
				//alert(obj);
			}
		});
	}
	
	function afterPingfen(num){
		$(".ping_fen_ul > li > img").each(function(i){
			if(i < num){
				this.src = "theme/images/xing1.png";
			}else{
				this.src = "theme/images/xing2.png";
			}
		});
		//unbindPinfenEvent();
	}
	
	function unbindPinfenEvent(){
		$(".ping_fen_ul > li").each(function(i){
			$(this).unbind();
		});
	}
	
	function UploadComment(num) {
		//num++;
        this.clickFunc = function() {
			//alert(num);
			comment(num, "<%= id %>");
        }    
    } 
	
	function bindPinfenEvent(){
		var num = 1;
		$(".ping_fen_ul > li").each(function(){
			var eventFun = new UploadComment(num);
			$(this).bind("click", eventFun.clickFunc);
			num++;
		});
	}

	$(document).ready(function(){
		$(".andorid_share").hide();
		$(".iphone_share").hide();
		var dev = window.navigator.userAgent.toLowerCase();
		if(dev.match(/Android/i)=='android'){
			$(".andorid_share").show();
		}else{
			$(".iphone_share").show();
		}
		//afterPingfen(2);
		bindPinfenEvent();
		
		getScreenWH();
		
		//$("#btn_again").removeClass("btn");
		//alert("<%= usedTimes %>")
		//alert("<%= Constant.MAX_TIMES%>")
		if("<%= usedTimes %>" == "<%= Constant.MAX_TIMES%>"){
			$("#btn_again").removeClass("c1").addClass("c2");
		}
	});
	
	function getScreenWH(){
		w = $(window).width();
		h = $(window).height();
		$('.upload_photo').width(w).height(h);
	}
	
</script>
</body>
</html>
